<div class=hide>{{ svg "flask" "id" "flask" }}</div><!-- For JS lang picker -->

{{ if .Data.Hole.Experiment }}
    <div {{ if eq .Data.Hole.ID "tutorial" }} class=info {{ else }} class=alert {{ end }}>
        {{ if eq .Data.Hole.ID "tutorial" }}
            {{ svg "info-circle" }}
            <p>
                <b>Tutorial</b> is a rather unique hole. It's designed to be very
                simple and a good introduction for new golfers. It won't
                contribute to scoring.
        {{ else }}
            {{ svg "flask" }}
            <p>
                This hole is experimental, passing requirements may change.
                Solutions won't contribute to scoring until the hole goes live.
        {{ end }}
    {{ if ne .Data.Hole.Experiment -1 }}
        <p>
            Please leave feedback on the
            <a href="//github.com/code-golf/code-golf/issues/{{ .Data.Hole.Experiment }}">
                GitHub issue</a>.
    {{ end }}
    </div>
{{ else if not .Golfer }}
    <div class=alert>
        {{ svg "exclamation" }}
        <p>
            Please
            <a class=log-in href="{{ .LogInURL }}">log in with GitHub</a>
            in order to save solutions and appear on the leaderboards.
            New here? Check out the <a href=tutorial>Tutorial hole</a>.
    </div>
{{ end }}

<header id=page-header>
{{ with .Data.Authors }}
    <dialog id=authors-dialog>
        <div>
            <h1>{{ $.Data.Hole.Name }} Authors</h1>
            <ul>{{ range . }}<li>{{ template "golfer-link" . }}{{ end }}</ul>
        </div>
    </dialog>
    <button data-dialog=authors-dialog id=authors-btn>
    {{ range . }}
        <img src="{{ avatar .AvatarURL 72 }}">
    {{ end }}
    </button>
{{ end }}
    <h1>{{ .Data.Hole.Name }}</h1>
    <nav>
    {{ with .Data.PrevHole }}
        <a class="btn orange" href="{{ .ID }}" title="{{ .Name }}">
            {{ svg "chevron-double-left-light" }} Prev
        </a>
    {{ end }}
        <a class="btn purple" href=random>
            {{ svg "dice-light" }} Random
        </a>
    {{ with .Data.NextHole }}
        <a class="btn orange" href="{{ .ID }}" title="{{ .Name }}">
            {{ svg "chevron-double-right-light" }} Next
        </a>
    {{ end }}
    {{ if .Golfer }}
        <button class="btn blue" data-dialog=settings-dialog title=Settings>
            {{ svg "gear-fill" }}
            Page Settings
        </button>
    {{ end }}
    </nav>
</header>
